---
title: Create React App - Installation Guide
description: Learn how to use Material Tailwind components with Create React App and Tailwind CSS to easily create elegant and flexible pages.
navigation:
  [
    "installation",
    "npm",
    "yarn",
    "pnpm",
    "tailwindcss-config",
    "with-monorepo",
    "theme-provider",
    "example",
  ]
github: guide/next
prev: installation
next: license
---

# Material Tailwind with CRA

<span id="installation" className="scroll-mt-48" />
Learn how to setup and install @material-tailwind/react with Create React App.

<br />
<br />

First you need to create a new project using create react app, for more details check the <a target="_blank" className="font-medium hover:text-blue-500 transition-colors" href="https://create-react-app.dev/docs/getting-started/?ref=material-tailwind">Create React App Official Documentation</a>

```bash
npx create-react-app my-app
```

<br />

Then you need to install Tailwind CSS since @material-tailwind/react is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project.
Check <a href="https://tailwindcss.com/docs/guides/create-react-app?ref=material-tailwind" target="_blank" className="font-medium hover:text-blue-500 transition-colors">Tailwind CSS Installation</a> for create react app on Tailwind CSS Documentation.

---

<DocsTitle href="npm">
## Using NPM
</DocsTitle>

Install @material-tailwind/react as a dependency using NPM by running the following command:

<span id="npm" className="scroll-mt-48" />

```bash
npm i @material-tailwind/react
```

---

<DocsTitle href="yarn">
## Using Yarn
</DocsTitle>

Install @material-tailwind/react as a dependency using Yarn by running the following command:

<span id="yarn" className="scroll-mt-48" />

```bash
yarn add @material-tailwind/react
```

---

<DocsTitle href="pnpm">
## Using PNPM
</DocsTitle>

Install @material-tailwind/react as a dependency using PNPM by running the following command:

<span id="pnpm" className="scroll-mt-48" />

```bash
pnpm i @material-tailwind/react
```

---

<DocsTitle href="tailwindcss-config">
## TailwindCSS Configurations
</DocsTitle>

<span id="tailwindcss-config" className="scroll-mt-48" />

Once you install @material-tailwind/react you need to wrap your tailwind css configurations with the <Code>withMT()</Code> function coming from @material-tailwind/react/utils.

```js {1, 3, 9}
const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
});
```

---

<DocsTitle href="with-monorepo">
## TailwindCSS Configurations with MonoRepo
</DocsTitle>

<span id="with-monorepo" className="scroll-mt-48" />

If you're using monorepo in your project you need to add the theme and components paths to your tailwind.config.js.

```js {6,7}
const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
});
```

---

<DocsTitle href="theme-provider">
## Theme Provider
</DocsTitle>

<span id="theme-provider" className="scroll-mt-48" />

@material-tailwind/react comes with a theme provider that set's the default theme/styles for components or to provide your own theme/styles to your components. You need to wrap your entire application with the <Code>ThemeProvider</Code> coming from @material-tailwind/react.

On the <Code>src/index</Code> put the code bellow.

```jsx {6, 12, 14}
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

import { ThemeProvider } from "@material-tailwind/react";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);
```

---

<DocsTitle href="example">
## Example
</DocsTitle>

Now you're good to go and use @material-tailwind/react in your project.

<CodePreview id="example" component={<Button>Button</Button>}>
```jsx
import { Button } from "@material-tailwind/react";

export default function Example() {
  return <Button>Button</Button>;
}
```
</CodePreview>
